<template>
	<view class="content">
		<u-navbar height="50" back-icon-color="#333" title="物流信息" title-color="#333" title-size="36"></u-navbar>
		<view class="logisticsView">
			<view class="logistics">
				<view class="goodsView" v-for="(item,index) in goodsInfo" :key="index">
					<image class="goodsImage" :src="item.goods_sku_cover_format" mode="aspectFill"></image>
					<view class="goodsData">
						<text class="goodsName">{{item.goods_name}}</text>
						<view class="goodsType">
							<text class="goodsPrice">¥{{item.goods_sku_price}}</text>
							<text class="goodsNum">x{{item.goods_number}}</text>
						</view>
					</view>
				</view>
				<view class="logView" v-if="express">
					<view class="logData">
						<text class="logTitle">{{express.support_express_name}}</text>
						<text class="logNum">{{express.support_express_number}}</text>
					</view>
					<text class="copyBtn" @click="onCopy(express)">复制</text>
				</view>
			</view>
			<view class="logisticsList" v-if="itemList && itemList.length > 0">
				<u-time-line >
					<u-time-line-item nodeTop="2" v-for="(item,index) in itemList" :key="index">
						<template v-slot:node v-if="index == 0">
							<view class="u-node" style="background: #F6632D;">
								<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title" v-if="index == 0">{{item.status}}</view>
								<view class="u-order-desc">{{item.context}}</view>
								<view class="u-order-time">{{item.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo: [],
				express: '',
				itemList: []
			}
		},
		onLoad(res) {
			this.initData(res.id);
			this.logistics(res.id);
		},
		methods: {
			initData(id) {
				let self = this;
				self.$user.orderDetails(id, true).then(res => {
					self.goodsInfo = res.data.goods;
				})
			},
			logistics(id) {
				let self = this;
				self.$api.expressQuery(id, true).then(res => {
					self.itemList = res.data.express_infos;
					self.express = res.data.delivery_infos;
					console.log("========res========"+JSON.stringify(res,null,2));
				})
			},
			onCopy(info) {
				let self = this;
				uni.setClipboardData({
					data: info.support_express_number,
					success: function() {
						self.$utils.tips('复制成功');
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f2f2f2;
	}

	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 50rpx;
	}

	.logisticsView {
		display: flex;
		flex-direction: column;
	}

	.logistics {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		z-index: 100;
		margin: 30rpx;
		border-radius: 10rpx;
	}

	.goodsView {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.goodsImage {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
	}

	.goodsData {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.goodsName {
		color: #333333;
		font-size: 30rpx;
	}

	.goodsType {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}

	.goodsPrice {
		flex: 1;
		font-size: 32rpx;
		font-weight: 400;
		color: #FB4736;
	}

	.goodsNum {
		font-size: 30rpx;
		font-weight: 400;
		color: #999;
	}

	.logView {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.logData {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		margin-left: 30rpx;
	}

	.logTitle {
		color: #333333;
		font-size: 34rpx;
	}

	.logNum {
		color: #999999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.copyBtn {
		color: #333333;
		font-size: 26rpx;
		border-radius: 30rpx;
		border: 1px solid #ccc;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 4rpx;
		padding-bottom: 4rpx;
		margin-right: 30rpx;
	}

	.logisticsList {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		padding: 30rpx 40rpx;
		z-index: 100;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-order-title.unacive {
		color: #999;
	}

	.u-order-desc {
		color: #999;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.tel {
		color: #FB4736;
	}
</style>
